<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">-->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .display {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="parentTarget">
        <form class="layui-form layui-form-pane1" id="searchForm" lay-filter="first">
            <!-- 查询条件 -->
            <div class="demoTable">
                <div class="layui-inline display" >
                    <input class="layui-input" name="keyword" id="demoReload" autocomplete="off" placeholder="查询关键字">
                </div>&nbsp;&nbsp;&nbsp;
                <div class="layui-input-inline display" >
                    <select name="roleId" id="roleId" lay-filter="roleId_search" lay-search>
                        <option value="">职务</option>
                    </select>
                </div>&nbsp;&nbsp;&nbsp;
                <!--选择生日月份-->
                <div class="layui-input-inline display" >
                    <select name="birthMonth" id="month" lay-filter="interest-search" lay-search>
                        <option value="">生日月份</option>
                        <option value="01">一月</option>
                        <option value="02">二月</option>
                        <option value="03">三月</option>
                        <option value="04">四月</option>
                        <option value="05">五月</option>
                        <option value="06">六月</option>
                        <option value="07">七月</option>
                        <option value="08">八月</option>
                        <option value="09">九月</option>
                        <option value="10">十月</option>
                        <option value="11">十一月</option>
                        <option value="12">十二月</option>
                    </select>
                </div>&nbsp;&nbsp;&nbsp;

                <button class="layui-btn">搜索</button>
            </div>
        </form>

        <table id="demo" lay-filter="test"></table>
    </div>
</body>
<script >

    /*表格数据*/
    layui.use(['table', 'form', 'layer'], function(){
        var table = layui.table
            , form = layui.form
            ,layer = layui.layer
            , $ = layui.$;

        //表格渲染
        var tableIns = table.render({
            elem: '#demo'
            ,height : 550
            ,width : 1310
            ,url: '/s/queryByPage' //数据接口
            ,page: true //开启分页
            // ,toolbar: '#toolbarDemo' //开启自定义按钮
            ,toolbar: 'default' //开启自定义按钮
            ,cols: [[ //表头
                {fixed: 'left', type: 'checkbox', width: 50}
                ,{type: 'numbers', title: '序号', width: 80, sort: true}
                ,{field: 'id', title: '员工ID', width: 100, sort: true, align:'center'}
                ,{field: 'realName', title: '姓名', minWidth: 100, align:'center'}
                ,{field: 'gender', title: '性别', minWidth: 80, align:'center', sort: true,templet:function (res) {
                        return res.gender==1? "男":"女";
                    }
                }
                ,{field: 'deptId', title: '部门', align:'center', minWidth: 80, templet: '<div>{{d.dept.name}}</div> '}
                ,{field: 'roleId', title: '职务', align:'center', minWidth: 80, templet: '<div>{{d.roleVo.name}}</div> '}
                ,{field: 'birthday', title: '生日', minWidth: 180, sort: true, align:'center'}
                ,{field: 'hireDate', title: '入职日期', minWidth: 180, sort: true, align:'center'}
                ,{fixed: 'right', title: '操作', width: 200, toolbar: '#barDemo'}
            ]]
            ,parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.items //解析数据列表
                };
            }
            ,request: {
                pageName: 'currPage' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,id: 'testReload'
        });



        // var active={
        //     reload:function () {
        //         var keyword=$("#demoReload").val();
        //         var roleId=$("[name='roleId']").find(":selected").val();
        //
        //         //执行重载
        //         table.reload("testReload"),{
        //             page:{
        //                 curr:1
        //             }
        //             ,method:"post"
        //             ,where:{
        //                 key:{
        //                     keyword:keyword,
        //                     roleId:roleId
        //                 }
        //             }
        //         }
        //     }
        // }

        //按钮单击事件，条件搜索
        $('.demoTable .layui-btn').on('click', function () {
           $.post(
               "/s/queryByPage",$("#searchForm").serialize(),function (res) {

               }
           )
        });

        //按钮单击事件，条件搜索
        $('.demoTable .layui-btn').on('click', function () {

            tableIns.reload({
                where: {
                    keyword: $('#demoReload').val(),
                    roleId: $("[name='roleId']").find(":selected").val(),
                    birthMonth: $("[name='birthMonth']").find(":selected").val()
                }
            })
        });

        /*获取职务数据*/
        getRole();

        /*获取职务数据*/
        function getRole(){

            $.post(
                "/s/getRole",{},function (res) {

                    //遍历
                    if(res.success=="true"){
                        var roleVoList =res.data;

                        for (var i = 0; i < roleVoList.length; i++) {

                            //创建新的option
                            var $new_option=$("<option></option>");
                            //将option添加到职务下拉框
                            $("[name='roleId']").append($new_option);
                            $new_option.val(roleVoList[i].id);
                            $new_option.html(roleVoList[i].name);
                            form.render();//更新全部
                        }

                    }
                }
            )
            /*监听职务下拉框*/
            form.on('select(quiz)', function(data){
                console.log('select.quiz：', this, data);
            });
            //监听提交
            // form.on('submit(*)', function(data){
            //     console.log(data)
            //     alert(JSON.stringify(data.field));
            //     return false;
            // });

        }


        //监听单元格事件
        //工具条事件
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
                //向服务端发送查看详情指令
                $.post('/s/unique',{'id':data.id},function (res) {
                    var staff = res.data
                    showInfo(staff);
                    form.render();
                });
            } else if(layEvent === 'del'){ //删除
                // alert(data);
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.post('/s/remove',{'id':data.id});
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                $.post('/s/modify',{'id':data.id},function (res) {
                    alert(JSON.stringify(res.data));
                });
                //同步更新缓存对应的值
                obj.update({
                    id: data.id
                    // ,userName:
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }else if(layEvent === 'add'){
                layer.msg('添加');
            }
        });

        //弹出层
        function showInfo(data) {
            layer.open({
                type: 1
                ,area: ['700px','400px']
                ,title: '员工详情'
                ,content: $('#newDiv').html()
                ,success:function (layero,index) {
                    /*获取职务数据*/
                    getRole();
                    // $("[name='roleId']").find("option[value='"+data.roleId+"']").prop("selected",true);
                    // form.render("select");

                    //日期
                    layui.use('laydate',function () {
                        var laydate=layui.laydate;
                        //执行一个laydate实例
                        lay('.test-item').each(function(){
                            laydate.render({
                                elem: this
                                ,trigger: 'click'
                            });
                        });
                    });
                    indexo=index;
                }
            });
            form.val('example',{
                'id': data.id
                ,'realName': data.realName
                ,'userName': data.userName
                ,'gender':data.gender
                ,'state':data.state
                ,'roleId':data.roleId
                ,'birthday':data.birthday
                ,'hireDate':data.hireDate
            });
            form.render();



        }
        //触发事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });

    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="newDiv">
    <form class="layui-form" lay-filter="example">
        <div class="layui-form-item display">
            <label class="layui-form-label">工号</label>
            <div class="layui-input-inline">
                <input type="text" name="id" required  lay-verify="required" placeholder="工号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item display">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="realName" required lay-verify="required" placeholder="姓名" autocomplete="off" class="layui-input">
            </div>
            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        </div>
        <div class="layui-form-item  display ">
            <label class="layui-form-label  ">性别</label>
            <div class="layui-input-inline ">
                <input type="radio" name="gender" value="1" title="男">
                <input type="radio" name="gender" value="0" title="女" >
            </div>
        </div>
        <div class="layui-form-item display">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" required lay-verify="required" placeholder="账号" autocomplete="off" class="layui-input">
            </div>
            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        </div>

        <div class="layui-form-item  display ">
            <label class="layui-form-label  ">状态</label>
            <div class="layui-input-inline ">
                <input type="radio" name="state" value="1" title="在职" >
                <input type="radio" name="state" value="2" title="离职" >
            </div>
        </div>
        <div class="layui-form-item display">
            <label class="layui-form-label">职务</label>
            <div class="layui-input-inline display " >
                <select name="roleId"  lay-filter="roleId_search" lay-search>
                    <option value="">职务</option>
                </select>
            </div>
            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        </div>
        <div class="layui-form-item display">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-inline display " >
                <input type="text" class="layui-input test-item" name="birthday">
            </div>
            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        </div>
        <div class="layui-form-item display">
            <label class="layui-form-label">入职日期</label>
            <div class="layui-input-inline display " >
                <input type="text" class="layui-input test-item" name="hireDate">
            </div>
            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        </div>

        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">选择框</label>-->
            <!--<div class="layui-input-inline">-->
                <!--<select name="city" lay-verify="required">-->
                    <!--<option value=""></option>-->
                    <!--<option value="0">北京</option>-->
                    <!--<option value="1">上海</option>-->
                    <!--<option value="2">广州</option>-->
                    <!--<option value="3">深圳</option>-->
                    <!--<option value="4">杭州</option>-->
                <!--</select>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">复选框</label>-->
            <!--<div class="layui-input-inline">-->
                <!--<input type="checkbox" name="like[write]" title="写作">-->
                <!--<input type="checkbox" name="like[read]" title="阅读" checked>-->
                <!--<input type="checkbox" name="like[dai]" title="发呆">-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">开关</label>-->
            <!--<div class="layui-input-inline">-->
                <!--<input type="checkbox" name="switch" lay-skin="switch">-->
            <!--</div>-->
        <!--</div>-->

        <!--<div class="layui-form-item layui-form-text">-->
            <!--<label class="layui-form-label">文本域</label>-->
            <!--<div class="layui-input-inline">-->
                <!--<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</script>

<script>

</script>
</html>